// // 监视属性读写 Object.defineProperty Vue3.0之前
// // Proxy对象
// // get监听属性的读取
// // set监听属性的写入/修改
// const person = {
//   name: 'zs',
//   age: 20
// }
// const personProxy = new Proxy(person, {
//   get(target, property) {
//     return property in target ? target[property] : 'default'
//     // console.log(target, property);
//     // return 100;
//     // // { name: 'zs', age: 20 } name
//     // // 100
//   },
//   set(target, property, value) {
//     // 设置校验
//     if (property === 'age') {
//       if (!Number.isInteger(value)) {
//         throw new TypeError(`${value} is not a int`)
//       }
//       // TypeError: infnite is not a int
//     }

//     console.log(target, property, value)
//     // { name: 'zs', age: 20 } age 21
//     // { name: 'zs', age: 20 } name ls
//     // { name: 'zs', age: 20 } gender true
//   }
// })
// personProxy.age = 21
// personProxy.name = 'ls'
// personProxy.gender = true
// // personProxy.age = "infnite";

// console.log(personProxy.name)
// // zs
// console.log(personProxy.xxx)
// // default
// //  ---------------------------------------------------------
// // defineProperty只能监听读取写入 Proxy 监听更多对象操作
// // delete操作, 方法调用
// const person = {
//   name: 'zs',
//   age: 20
// }
// // Proxy 的deleteProperty可以监听到delete事件并做出相应的动作
// const personProxy = new Proxy(person, {
//   deleteProperty(target, property) {
//     console.log('delete', property)
//     delete target[property]
//   }
// })
// delete personProxy.age
// console.log(person)
// // delete age
// // { name: 'zs' }
// // 其他get set has deleteProperty setProperty isExtensible
// // preventExtensions getOwnPropertyDescriptor
// // defineProperty ownKeys apply construct
// ---------------------------------------------------------
// 对于数组对象的监视
// 重写数组来监视
// vue.js 通过自定义的方法去覆盖掉数组原型对象上的push shift方法
// 以此劫持方法对应的调用过程
// 直接使用Proxy的set对数组修改进行监视
const list = []
const listProxy = new Proxy(list, {
  set(target, property, value) {
    console.log('set', property, value)
    target[property] = value
    return true
  }
})
list.push(100)
// 空
// 添加成功但是set没自动调用 所以监听且反馈需要对Proxy操作, 对原数组操作不能触发
listProxy.push(100)
// 下标识1 值为100 数组长度2
// set 1 100
// set length 2
// ---------------------------------------------------------
// proxy是以非侵入的方式监管了对象的读写
// 不需要对象本身做任何操作
// defineProperty需要单独定义被监视的属性 做很多额外操作
